<template>
  <el-dialog
    v-loading="loading"
    :visible.sync="dialog"
    title="上传模板"
    width="500px"
    :close-on-click-modal="false"
    append-to-body
    @close="cancel"
  >
    <div>
      <el-form ref="templateForm" :model="param" :rules="rules" size="small" label-width="180px">
        <el-form-item label="模板类型：" prop="changeType">
          <el-select v-model="param.changeType" style="width: 280px">
            <el-option v-for="option in templateConfig.changeType" :key="option.key" :label="option.value" :value="option.key" />
          </el-select>
        </el-form-item>
        <el-form-item label="模板用途：" prop="templateType">
          <el-select v-model="param.templateType" style="width: 280px">
            <el-option v-for="option in templateConfig.templateType" :key="option.key" :label="option.value" :value="option.key" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="(param.changeType ===0 || param.changeType) && param.templateType" label="模板上传：" prop="templateFile">
          <el-upload
            ref="upload"
            :auto-upload="false"
            :on-exceed="handleExceed"
            :on-change="handleOnChange"
            :limit="1"
            :multiple="false"
            :file-list="fileList"
            action="#"
          >
            <el-button size="small" type="primary">点击选择上传Excel文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且大小不超过10MB</div>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button type="primary" @click="doSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Message } from 'element-ui'
import { uploadTemplate } from '@/api/export-template'

export default {
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      dialog: false,
      loading: false,
      fileList: [],
      templateConfig: window.templateConfig,
      param: { changeType: null, templateType: null },
      rules: {
        changeType: [
          { required: true, message: '请选择模板类型', trigger: 'blur' }
        ],
        templateType: [
          { required: true, message: '请选择模板用途', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    cancel() {
      this.dialog = false
      this.fileList = []
      this.param = {}
    },
    // 文件超出个数限制时的钩子
    handleExceed(files, fileList) {
      Message({
        message: '文件上传数量限制为1个。',
        type: 'warning',
        duration: 3 * 1000
      })
    },
    // 文件变动的钩子
    handleOnChange(file, fileList) {
      console.log(file.raw.type)
      if (this.param.templateType !== 3 && !(file.raw.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')) {
        Message({
          message: '请上传格式为xlsx的文件。',
          type: 'warning',
          duration: 3 * 1000
        })
        fileList.pop()
      } else if (this.param.templateType === 3 && !file.raw.type.startsWith('application/vnd.ms-excel.sheet.macroEnabled')) {
        Message({
          message: '请上传格式为xlsm的文件。',
          type: 'warning',
          duration: 3 * 1000
        })
        fileList.pop()
      }
      var size = file.size / 1024 / 1024
      if (size > 10) {
        Message({
          message: '文件大小必须小于10M。',
          type: 'warning',
          duration: 3 * 1000
        })
        fileList.pop()
      } else {
        this.fileList = fileList
      }
    },
    // 确定按钮触发
    doSubmit() {
      this.$refs.templateForm.validate((valid) => {
        if (valid) {
          if (this.fileList.length > 0) {
            this.loading = true
            const file = this.fileList[0]
            var formData = new FormData()
            formData.append('file', file.raw)
            formData.append('changeType', this.param.changeType)
            formData.append('templateType', this.param.templateType)
            uploadTemplate(formData).then(() => {
              this.parent.toQuery()
              Message({
                message: '上传成功。',
                type: 'success',
                duration: 3 * 1000
              })
              this.loading = false
              this.dialog = false
            }, error => {
              console.log(error)
              this.loading = false
            })
          } else {
            Message({
              message: '请选择上传模板。',
              type: 'error',
              duration: 3 * 1000
            })
          }
        }
      })
    }
  }
}
</script>
